<template>
  <div class="sidebar-box">
    <div class="sidebar-item" v-for="(item,index) in tabList" :key="index">
      <h3>{{ item.name }}</h3>
      <ul>
        <li v-for="(subItem,subIndex) in item.children" :key="subIndex" :class="subIndex === activeTab && currentIndex === index ? 'active' : ''" @click="handleTabClick(subItem, subIndex, index)">{{ subItem.title }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SidebarMenu',
  props: {
    tabList: Array
  },
  data () {
    return {
      activeTab: 0,
      currentIndex: 0
    }
  },
  methods: {
    handleTabClick(sItem, sIndex, index) {
      this.activeTab = sIndex;
      this.currentIndex = index;
      this.$emit('tabClick', sItem)
    }
  }
}
</script>

<style lang="less" scoped>
.sidebar-box {
  width: 120px;
  text-align: left;
  margin-right: 70px;
  .sidebar-item{
    margin-bottom: 56px;
    h3{
      font-weight: 500;
      font-size: 18px;
      color: #0C0D0E;
    }
    ul{
      list-style: none;
      padding: 0;
      li{
        font-weight: 400;
        font-size: 14px;
        color: #0C0D0E;
        list-style: none;
        padding-left: 20px;
        line-height: 40px;
        border-left: 1px solid #E5E6EB;
        cursor: pointer;
        &.active{
          border-left: 2px solid #317AF7;
          color: #317AF7;
          font-weight: bold;
        }
      }
    }
  }
}

.sidebar li {
  margin: 5px 0;
}

.sidebar a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

</style>